<!--
* @description 参数1
* @fileName 06.监听属性
* @author userName
* @date 2024-01-23 13:33:07
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>06.监听属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
    <div id="app">
        姓 <input type="text" v-model="firstName"> + 名
        <input type="text" v-model="lastName"> = 姓名 
        <input type="text" v-model.lazy="fullName">
        <hr>
        {{stu.name}} - {{stu.age}} 
        <hr>
        <button @click="handlerChnageAge">修改student年龄</button>
    </div>

    <script>
        /*
          监听属性的特点： 
             1. 监听状态的变化  没有返回值
             2. 初始化监听属性不执行
             3. 监听属性监听对象时 默认监听对象的地址而非里面的内容

             4. 计算属性和监听属性的区别 
              使用场景： 计算属性 只能根据当前的状态进行计算    有缓存
                        监听属性  可以监听第三方属性 例如路由...  无缓存
        */
        var vm = new Vue({
            data:{
                firstName:'小',
                lastName:'名',
                fullName:"",
                stu:{
                    name:"小明",
                    age:18
                }
            },
            watch:{
                firstName(value,oldValue) {
                    // console.log(v1,v2);
                    this.fullName = value + this.lastName;
                },
                lastName(value) {
                    this.fullName = this.firstName + value;
                },
                fullName(value) {
                    this.firstName = value.substr(0,1)
                    this.lastName = value.substr(1)
                },
                stu:{
                    handler(value,oldValue) {
                        console.log(value,oldValue);
                        this.stu.name = "小红"
                    },
                    deep:true,  // 深度监听 监听对象中属性的改变
                    immediate:true
                }
                // stu(obj) {
                  
                //     this.stu.name = "小红"

                // }
                // "stu.age" : function(value) {
                //     console.log(value);
                //     // this.stu.age  = value + 10
                //     this.stu.name = "小红"
                // }
            },
            methods:{
                handlerChnageAge() {
                     this.stu.age = 20
                    // this.stu =  {
                    //     name:"小明",
                    //     age:20
                    // }
                } 

            }
        });
        vm.$mount("#app")
    </script>
</body>

</html>